<template>
  <el-image :style="styleCustom" :class="classCustom" :src="getImageUrl(url)" :fit="fit" :lazy="lazy"
    :preview-src-list="previewHandle.status ? previewListDivision() : previewList" :z-index="zIndex">
    <div slot="placeholder" class="image-slot" title="加载中">
      <i class="el-icon-loading" style="color: #409EFF" />
    </div>
    <div slot="error" class="image-slot" title="加载失败">
      <i class="el-icon-warning-outline" style="color: #909399" />
    </div>
  </el-image>
</template>

<script>
export default {
  name: 'ZkImage',
  props: {
    // 自定义样式
    styleCustom: {
      type: String,
      default: ''
    },

    // 自定义类名
    classCustom: {
      type: String,
      default: ''
    },

    // 图片地址
    url: {
      type: String,
      default: ''
    },

    // 图片对其方式
    fit: {
      type: String,
      default: 'cover' // fill / contain / cover / none / scale-down
    },

    // 是否懒加载
    lazy: {
      type: Boolean,
      default: false
    },

    // 图片预览列表
    previewList: {
      type: Array,
      default: () => []
    },

    // 预览遮罩层级
    zIndex: {
      type: Number,
      default: 2000
    },

    // 预览处理
    previewHandle: {
      type: Object,
      default: () => {
        return {
          status: false, // 是否需要处理
          str: ',', // 分隔符
          previewStr: '' // 需要切割的字符
        }
      }
    }
  },
  data() {
    return {

    }
  },
  mounted() {

  },
  methods: {
    /*
      获取完整图片地址
    */
    getImageUrl(url) {
      console.log("url", url)
      if (url.includes('http')) { //判断是否包含http请求头
        return url
      } else {
        return `${process.env.VUE_APP_BASE_API}/${url}`
      }
      // return url
    },
    /*
      预览列表分割
    */
    previewListDivision() {
      if (!this.previewHandle.str) return [this.getImageUrl(this.previewHandle.previewStr)]
      return this.previewHandle.previewStr.split(this.previewHandle.str).map(item => {
        return this.getImageUrl(item)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.image-slot {
  position: relative;
  width: 100%;
  height: 100%;
  background: #f8f8f8;

  i {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
  }
}
</style>
